<template>
  <div>
    <h2 class="detail-title">实验报告基本信息</h2>
    <div class="detail-info">
      <div class="detail-item">实验报告ID：{{data.id}}</div>
      <div class="detail-item">实验报告名称：{{data.title}}</div>
      <div class="detail-item">所属实验：{{data.experiment_name}}</div>
      <div class="detail-item">学号：{{data.studentID}}</div>
      <div class="detail-item">用户姓名：{{data.username}}</div>
      <div class="detail-item">提交时间：{{data.submit_time}}</div>
    </div>
    <div class="form">
      <div class="text-input-suffix">
        <span class="form-input-label">成绩：</span>
        <el-input v-model="data.score" type="number"></el-input>
      </div>
      <div class="text-input-suffix">
        <span class="form-input-label">评阅意见：</span>
        <el-input
          class="input-text"
          type="textarea"
          :rows="3"
          v-model="data.comment">
        </el-input>
      </div>
      <div class="footer">
        <el-button type="primary" @click="onSubmit">评分</el-button>
      </div>
    </div>

    <div class="form">
       <div class="text-input-suffix">
        <span class="form-input-label">实验报告：</span>
        <div class="form-right-div">
          {{data.content}}
        </div>
      </div>
      <div class="text-input-suffix">
        <span class="form-input-label">报告附件：</span>
        <div class="form-right-div">
          <p  v-for="(a, i) in attaches" :key="`attach${i}`">
            <a :href="a.attach_url">
              {{a.file_name}}
            </a>
          </p>
        </div>
      </div>
      <!-- <div class="text-input-suffix">
        <span class="form-input-label">访问日志：</span>
        <div class="form-right-div">
          <p>1、实验报告附件.jpg</p>
        </div>
      </div>
      <div class="text-input-suffix">
        <span class="form-input-label">操作日志：</span>
        <div class="form-right-div">
          <p>1、实验报告附件.jpg</p>
        </div>
      </div> -->
      <div class="text-input-suffix">
        <span class="form-input-label">实验截图：</span>
        <div class="form-right-div">
          <p v-for="(a, i) in imgs" :key="`image${i}`">
            <img width="100" height="100" :src="a.attach_url" />
          </p>
        </div>
      </div>
      <div class="text-input-suffix">
        <span class="form-input-label">实验录屏：</span>
        <div class="form-right-div">
          <p v-for="(a, i) in videos" :key="`video${i}`">
            <video controls width="250">
                <source :src="a.attach_url" type="video/webm">
                <source :src="a.attach_url" type="video/mp4">
                Sorry, your browser doesn't support embedded videos.
            </video>
          </p>
        </div>
      </div>

      <div class="submit-btns">
        <el-button @click="onCancel">返 回</el-button>
      </div>
    </div>
  </div>
</template>
<script>
import { reportModel } from "@/api/models";
import { Message } from "element-ui";
export default {
  mixins: [],
  data() {
    return {
      data: {
        id: null,
        expermient_name: null,
        comment: '一、实验',
        content: '一、实验rbtk',
        access_log: [],
        oprate_log: [],
        attach: []
      },
      imgs: [],
      videos: [],
      attaches: []
    };
  },
  mounted() {
    if(this.$route.params.id) {
      reportModel.item(this.$route.params.id, (res) => {
        this.data = res.data;
        let imgs = []
        let videos = []
        let attaches = []
        this.data.attach.forEach(v => {
          if(v.file_type == 'I')
            imgs.push(v)
          else if(v.file_type == 'V')
            videos.push(v)
          else
            attaches.push(v)
        })
        this.imgs = imgs
        this.videos = videos
        this.attaches = attaches
      });
    }
  },
  methods: {
    getItem() {
      reportModel.item(this.id, (res) => {
        this.data = res.data;
      });
    },
    onCancel() {
      this.$router.go(-1);
    },
    onSubmit() {
      let d = this.data;
      reportModel.score({
        id: d.id,
        comment: d.comment,
        score: d.score
      }, res => {
        Message.success(res.message)
      })
    }
  }
};
</script>
<style scoped lang="scss">
.form{
  text-align: left;
}
.el-textarea {
  margin-left: 20px;
  width: 80%;
}
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}
.el-tree-div {
  width: 50%;
  margin-left: 100px;
  border: 1px solid #cccccc;
  padding: 20px;
}
.tree-input > input {
  border: none;
  background: rgba(0, 0, 0, 0);
}
.link-konwledge{
  padding: 5px 15px;
  border: 1px solid #DCDFE6;
  margin-left: 20px; cursor: pointer;
}
.submit-btns{
  margin-top: 20px;
  text-align: left;
}
</style>